<!--菜单搜索功能-->
<!--先写静态页面-->
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Green-download</title>
    <style>
        * {
            box-sizing: border-box;
        }
        
        .container {
            padding: 10px;
        }
        
        .dnav {
            float: left;
            padding: 5px;
            background: grey;
        }
        
        .dnav ul {
            list-style-type: none;
            margin: 10px;
            padding: 0px;
        }
        
        .dnav ul li {
            height: 20px;
        }
        
        .dnav ul li a {
            padding: 10px;
            margin: 20px;
            text-decoration: none;
            font-size: 18px;
            color: black;
            display: block
        }
        
        .dnav ul li a:hover {
            color: white;
        }
        
        .dnav input {
            width: 100%;
            font-size: 18px;
            padding: 11px;
            border: 1px solid #ddd;
        }
        
        .content {
            float: left;
            width: 70%;
            padding: 5px;
            background: lightgrey;
        }
    </style>
</head>

<body>
    <div class="container">
        <!--左右布局的实例-->
        <div class="dnav">
            <nav class="nav">
                <h2>索引
                    <h2>
                        <input placeholder="请输入关键字" id="mysearch" onkeyup="search()">
                        <ul>
                            <LI>
                                <a href="javascript:history.back(-1)">BACK</a>
                            </LI>
                        </ul>
            </nav>
        </div>
        <div class="content">
            <h1>----Eclipse----</h1>
            <h2>_Sketch></h2>
            <h3>CN:</h3>
            <p>JavaFX Scene Builder是一种可视化布局工具，它使用户可以快速设计JavaFX应用程序用户界面，而无需编写代码。用户可以将UI组件拖放到工作区，修改其属性，应用样式表，并且将在后台自动生成他们正在创建的布局的FXML代码。结果是一个FXML文件，然后可以通过将UI绑定到应用程序的逻辑来与Java项目组合。</p>
            <H3>EN:</H3>
            <p>
                JavaFX scene builder is a visual layout tool, which enables users to quickly design the user interface of JavaFX applications without writing code. Users can drag and drop UI components to the workspace, modify their properties, apply style sheets, and
                automatically generate the fxml code of the layout they are creating in the background. The result is an fxml file that can then be combined with a java project by binding the UI to the logic of the application. </p>
            <h2>install[安装]</h2>

            <p>
                [en]After the normal software installation process, open eclipse and select Window > references > JavaFX > Browse... - > [path of JavaFX scene builder.exe you installed] [example: D:: (JavaFX) Java scene Builder 2.0 / JavaFX scene builder 2.0.exe) - >
                OK
            </p>
            <p>
                [cn]前往 <a href="https://www.oracle.com/java/technologies/javafxscenebuilder-1x-archive-downloads.html">https://www.oracle.com/java/technologies/javafxscenebuilder-1x-archive-downloads.html</a>下载最新版的JavaFX Scene Builder的安装包
                <p>通过正常的安装软件的流程安装完成后,打开Eclipse,选择Window -> References -> JavaFX -> Browse... -> [你安装的JavaFX Scene Builder.exe的路径]【例子：D:\javafx\Java Scene Builder 2.0\JavaFX Scene Builder 2.0.exe】 -> ok
                </p>
            </p>
            <h2>Version number[版本号]</h2>
            <div>
                <p>2.0</p>
                <p>1.0</p>
            </div>
        </div>

    </div>

    </p>
    </div>
    <script>
        //功能：主要是过滤，通过转换为大写toUpperCase,然后用indexOff来查询返回字符串位子，无就返回-1
        function search() {
            var input = document.getElementById("mysearch").value;
            var li = document.getElementsByTagName("li");
            var fliter = input.toUpperCase();
            for (var i = 0; i < li.length; i++) {
                if (li[i].innerHTML.toUpperCase().indexOf(fliter) > -1) {
                    li[i].style.display = "block";
                } else {
                    li[i].style.display = "none";
                }

            }

        }
    </script>
</body>

</html>